<template>
	<div v-if="dataInfo">
		<view class="wrap-customer-info">
			<view class="title-color f-28 fBold"> 客户信息 </view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 下单人: </view>
				<view class="value f-28 flex align-center just-end">
					<view class="check-sign" v-if="userStatus === 2" @click="checkSign">查看标签</view>

					<text class="limit-num-line limit-width">
						{{ dataInfo.address.name }}
					</text>
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 联系方式: </view>
				<view class="value f-28 flex align-center just-end">
					<view
						v-if="userStatus === 2"
						class="flex align-center"
						@click="$filters.callPhone(dataInfo.address.mobile)"
					>
						<image class="icon-phone" :src="getImageURL('order/detail_phone.png')" />

						<view class="text">拨打电话</view>
					</view>

					<text v-else>{{ dataInfo.address.mobile }}</text>
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 服务地址: </view>

				<view
					class="value f-28 flex align-center just-end"
					v-if="userStatus === 2"
					@click="$filters.openMapNav(dataInfo.address)"
				>
					<image class="icon-nav" :src="getImageURL('order/detail_address.png')" />

					<view class="text">立即导航</view>
				</view>
			</view>

			<view class="value f-28 address">
				{{ dataInfo.address.address }}
				{{ dataInfo.address.street_name }}
				{{ dataInfo.address.community_name }}
				{{ dataInfo.address.area }}
			</view>
		</view>

		<userSign :isShow.sync="isShow" />
	</div>
</template>

<script>
	import userSign from "@/components/mine/user_sign.vue";
	export default {
		components: {
			userSign,
		},
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 用户身份 1:普通用户 2:技师
			 */
			userStatus: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				isShow: false,
			};
		},
		methods: {
			/**
			 * 查看标签
			 */
			checkSign() {
				this.isShow = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-customer-info {
		margin-top: 20rpx;
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: white;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		--limit-num: 1;

		.info-item {
			width: 100%;
			overflow: hidden;
			margin-top: 30rpx;
		}

		.address {
			text-align: left !important;
			margin-top: 30rpx;
			line-height: 40rpx;
		}

		.left {
			color: $sub-title-color;
			margin-right: 20rpx;
		}

		.value {
			flex: 1;
			color: $title-color;
			overflow: hidden;

			.icon-phone {
				width: 36rpx;
				height: 36rpx;
			}

			.text {
				color: $theme-color;
				margin-left: 12rpx;
			}

			.icon-nav {
				width: 32rpx;
				height: 36rpx;
			}
		}

		.title-color {
			color: $title-color;
		}

		.check-sign {
			width: 120rpx;
			margin-right: 18rpx;
			color: $theme-color;
		}

		.limit-width {
			max-width: 400rpx;
		}
	}
</style>
